<template>
	<u-popup :show="value" :duration="200" round="30rpx" :closeable="true" @close="handleClose">
		<view class="upload-box">
			<view class="upload-title">请选择上传方式</view>
			<view class="upload-type">
				<view class="upload-type-item" @click="chooseFile(1)">
					<image src="@/static/img/upload-wx.png" mode="aspectFit"></image>
					<text>微信上传</text>
				</view>
				<view v-if="type !== 'image'" class="upload-type-item" @click="chooseFile(2)">
					<image src="@/static/img/upload-txdoc.png" mode="aspectFit"></image>
					<text>腾讯文档</text>
				</view>
				<view v-if="type === 'image'" class="upload-type-item" @click="chooseFile(3)">
					<image src="@/static/img/upload-img.png" mode="aspectFit"></image>
					<text>图片上传</text>
				</view>
				<view v-if="type !== 'image'" class="upload-type-item" @click="chooseFile(4)">
					<image src="@/static/img/upload-file.png" mode="aspectFit"></image>
					<text>文件上传</text>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		uploadImage,
		uploadWechat
	} from '@/utils/util'
	import {
		PrintApi
	} from '@/api'
	export default {
		name: 'UploadFile',
		props: {
			// 是否展示
			value: {
				type: Boolean,
				default: false
			},
			// 上传的文件类型
			type: {
				type: String,
				default: 'all' // image / file
			}
		},
		emits: ['input'],
		data() {
			return {}
		},
		methods: {
			handleClose() {
				this.$emit('input', false)
			},
			async chooseFile(type) {
				try {
					this.$showLoading()
					switch (type) {
						case 1:
							const fileList = await uploadWechat(this.type)
							this.$emit('upload', fileList)
							break;
						case 2:
							// await uploadWechat(this.type)
							this.$showToast('功能开发中,敬请期待!')
							break;
						case 3:
							const imgList = await uploadImage()
							this.$emit('upload', imgList)
							break;
						case 4:
							this.$navTo('pages/indexs/doc/local_upload')
							break;
						default:
							break;
					}
				} catch (e) {
					uni.hideLoading()
					this.$showToast(e.message)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upload-title {
		margin-top: 40rpx;
		text-align: center;
	}

	.upload-type {
		display: grid;
		grid-template-columns: repeat(4, 100rpx);
		grid-gap: 60rpx;
		justify-content: center;
		margin: 80rpx auto 100rpx;
	}

	.upload-type-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-item: center;

		>image {
			width: 100rpx;
			height: 100rpx;
		}

		>text {
			margin-top: 20rpx;
			color: #969696;
			font-size: 24rpx;
		}
	}
</style>